<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代海战模拟器 - Three.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #0a192f, #112240);
            color: white;
        }
        
        #container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }
        
        canvas {
            display: block;
        }
        
        #ui {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            z-index: 10;
            pointer-events: none;
        }
        
        #ui > * {
            pointer-events: auto;
        }
        
        .panel {
            background: rgba(0, 20, 40, 0.85);
            border: 1px solid rgba(100, 180, 255, 0.5);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            backdrop-filter: blur(5px);
            box-shadow: 0 0 20px rgba(0, 100, 255, 0.3);
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
            min-width: 120px;
            padding: 8px;
            background: rgba(0, 40, 80, 0.6);
            border-radius: 5px;
            margin: 5px;
            box-shadow: 0 0 10px rgba(0, 100, 200, 0.2);
        }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #4af;
            text-shadow: 0 0 10px rgba(0, 200, 255, 0.7);
        }
        
        .controls {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }
        
        .control-item {
            background: rgba(0, 60, 120, 0.7);
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            font-size: 0.9rem;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 15px;
            font-size: 1.8rem;
            text-shadow: 0 0 10px rgba(0, 200, 255, 0.7);
            background: linear-gradient(to right, #00c6ff, #0072ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        h2 {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: #6df;
            border-bottom: 1px solid rgba(100, 180, 255, 0.3);
            padding-bottom: 5px;
        }
        
        #start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(0, 10, 30, 0.95);
            z-index: 20;
            transition: opacity 0.5s;
        }
        
        .btn {
            background: linear-gradient(to right, #0072ff, #00c6ff);
            border: none;
            color: white;
            padding: 12px 30px;
            font-size: 1.2rem;
            border-radius: 30px;
            margin: 10px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 200, 255, 0.4);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        #game-title {
            font-size: 3.5rem;
            margin-bottom: 20px;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 20px rgba(0, 200, 255, 0.5);
        }
        
        #game-description {
            max-width: 600px;
            text-align: center;
            margin: 20px 0 30px;
            line-height: 1.6;
            color: #aaf;
            font-size: 1.1rem;
        }
        
        .instructions {
            background: rgba(0, 30, 60, 0.7);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            max-width: 500px;
            border: 1px solid rgba(100, 180, 255, 0.3);
        }
        
        .instructions ul {
            margin: 15px 0;
            padding-left: 20px;
        }
        
        .instructions li {
            margin: 8px 0;
            list-style-type: none;
            padding-left: 20px;
            position: relative;
        }
        
        .instructions li:before {
            content: "➤";
            position: absolute;
            left: 0;
            color: #4af;
        }
        
        .weapon-system {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }
        
        .weapon {
            background: rgba(20, 60, 100, 0.7);
            border-radius: 8px;
            padding: 10px;
            width: 30%;
            text-align: center;
            border: 1px solid rgba(100, 180, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .weapon:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 10px rgba(0, 100, 255, 0.3);
        }
        
        .weapon.active {
            background: linear-gradient(to bottom, #0072ff, #0055cc);
            border-color: #4af;
            box-shadow: 0 0 15px rgba(100, 200, 255, 0.7);
        }
        
        #radar {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid #0af;
            border-radius: 50%;
            z-index: 10;
            overflow: hidden;
        }
        
        #radar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 100%;
            background: linear-gradient(transparent, #0af, transparent);
            transform: rotate(45deg);
            transform-origin: top left;
            animation: radar-sweep 3s linear infinite;
        }
        
        @keyframes radar-sweep {
            from { transform: rotate(0); }
            to { transform: rotate(360deg); }
        }
        
        .radar-dot {
            position: absolute;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        
        .dot-ship { background: #ff5555; }
        .dot-submarine { background: #00ffaa; }
        .dot-aircraft { background: #ffff00; }
        
        .unit-info {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 20, 40, 0.85);
            border-radius: 10px;
            padding: 15px;
            width: 250px;
            border: 1px solid rgba(100, 180, 255, 0.5);
            backdrop-filter: blur(5px);
            box-shadow: 0 0 20px rgba(0, 100, 255, 0.3);
        }
        
        .unit-icon {
            width: 60px;
            height: 60px;
            background: rgba(0, 60, 120, 0.7);
            border-radius: 10px;
            margin: 0 auto 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
        }
        
        .unit-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 10px;
        }
        
        .unit-stat {
            background: rgba(0, 40, 80, 0.6);
            padding: 6px;
            border-radius: 5px;
            text-align: center;
        }
        
        .mini-map {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 180px;
            height: 180px;
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid #0af;
            border-radius: 10px;
            z-index: 10;
            overflow: hidden;
        }
        
        .mini-map-player {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #00ff00;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        
        .mini-map-enemy {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        
        .mini-ship { background: #ff5555; }
        .mini-sub { background: #00ffaa; }
        .mini-aircraft { background: #ffff00; }
        
        .notification {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 30, 60, 0.9);
            color: white;
            padding: 20px 40px;
            border-radius: 10px;
            font-size: 1.5rem;
            text-align: center;
            z-index: 15;
            animation: fadeOut 2s forwards;
            border: 1px solid rgba(100, 180, 255, 0.5);
            box-shadow: 0 0 30px rgba(0, 100, 255, 0.5);
        }
        
        @keyframes fadeOut {
            0% { opacity: 1; }
            70% { opacity: 1; }
            100% { opacity: 0; visibility: hidden; }
        }
        
        .water-disturbance {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 2px solid rgba(0, 200, 255, 0.5);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: ripple 2s infinite;
            pointer-events: none;
        }
        
        @keyframes ripple {
            0% { width: 0; height: 0; opacity: 1; }
            100% { width: 200px; height: 200px; opacity: 0; }
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="ui">
            <div class="panel">
                <h1>现代海战模拟器</h1>
                <div class="stats">
                    <div class="stat-item">
                        <div>生命值</div>
                        <div class="stat-value" id="health">100%</div>
                    </div>
                    <div class="stat-item">
                        <div>敌方目标</div>
                        <div class="stat-value" id="targets">12</div>
                    </div>
                    <div class="stat-item">
                        <div>得分</div>
                        <div class="stat-value" id="score">0</div>
                    </div>
                    <div class="stat-item">
                        <div>武器系统</div>
                        <div class="stat-value" id="weapon">主炮</div>
                    </div>
                    <div class="stat-item">
                        <div>舰载机</div>
                        <div class="stat-value" id="aircrafts">4</div>
                    </div>
                    <div class="stat-item">
                        <div>鱼雷</div>
                        <div class="stat-value" id="torpedos">8</div>
                    </div>
                </div>
                
                <div class="weapon-system">
                    <div class="weapon active" id="weapon1">主炮</div>
                    <div class="weapon" id="weapon2">导弹</div>
                    <div class="weapon" id="weapon3">鱼雷</div>
                </div>
            </div>
            
            <div class="panel">
                <h2>控制说明</h2>
                <div class="controls">
                    <div class="control-item">W/S: 前进/后退</div>
                    <div class="control-item">A/D: 左转/右转</div>
                    <div class="control-item">鼠标: 瞄准</div>
                    <div class="control-item">左键: 开火</div>
                    <div class="control-item">1/2/3: 切换武器</div>
                    <div class="control-item">F: 发射舰载机</div>
                    <div class="control-item">C: 切换视角</div>
                    <div class="control-item">R: 重新装弹</div>
                </div>
            </div>
        </div>
        
        <div class="unit-info">
            <h2>单位信息</h2>
            <div class="unit-icon">🚢</div>
            <div>航空母舰 - 辽宁号</div>
            <div class="unit-stats">
                <div class="unit-stat">长度: 304m</div>
                <div class="unit-stat">航速: 30节</div>
                <div class="unit-stat">船员: 1980人</div>
                <div class="unit-stat">舰载机: 24架</div>
            </div>
        </div>
        
        <div id="radar"></div>
        <div class="mini-map"></div>
        
        <div id="start-screen">
            <h1 id="game-title">现代海战模拟器</h1>
            <p id="game-description">指挥你的航空母舰战斗群，在广阔的海洋上对抗敌方舰队。使用先进的武器系统，在激烈的现代海战中取得胜利！</p>
            
            <div class="instructions">
                <h2>战场单位</h2>
                <ul>
                    <li>航空母舰 - 玩家主舰，可发射舰载机</li>
                    <li>驱逐舰 - 中型火力，配备导弹系统</li>
                    <li>护卫舰 - 轻型快速舰艇，配备防空武器</li>
                    <li>潜艇 - 水下威胁，使用鱼雷攻击</li>
                    <li>舰载机 - 从航母起飞，执行空袭任务</li>
                </ul>
                
                <h2>游戏说明</h2>
                <ul>
                    <li>使用WASD键控制战舰移动</li>
                    <li>鼠标瞄准目标，左键点击开火</li>
                    <li>使用数字键1-3切换武器系统</li>
                    <li>按F键发射舰载机</li>
                    <li>按C键切换不同视角</li>
                    <li>雷达系统会显示敌方位置</li>
                </ul>
            </div>
            
            <button class="btn" id="start-btn">开始战斗</button>
        </div>
    </div>

    <script>
        // 游戏主逻辑
        class NavalBattleSimulator {
            constructor() {
                // 游戏状态
                this.gameActive = false;
                this.health = 100;
                this.score = 0;
                this.enemies = [];
                this.projectiles = [];
                this.aircrafts = [];
                this.waterDisturbances = [];
                this.currentWeapon = 0;
                this.weapons = ['主炮', '导弹', '鱼雷'];
                this.aircraftCount = 4;
                this.torpedoCount = 8;
                this.cameraMode = 0; // 0-跟随 1-自由 2-俯视
                
                // 初始化Three.js
                this.initScene();
                
                // 设置事件监听器
                this.setupEventListeners();
                
                // 初始化游戏对象
                this.createShip();
                this.createOcean();
                this.createSky();
                this.createEnemies(12);
                
                // 开始动画循环
                this.animate();
            }
            
            initScene() {
                // 创建场景
                this.scene = new THREE.Scene();
                this.scene.background = new THREE.Color(0x001133);
                this.scene.fog = new THREE.Fog(0x001133, 500, 2000);
                
                // 创建相机
                this.camera = new THREE.PerspectiveCamera(
                    75, 
                    window.innerWidth / window.innerHeight, 
                    0.1, 
                    3000
                );
                this.camera.position.set(0, 50, 100);
                
                // 创建渲染器
                this.renderer = new THREE.WebGLRenderer({ antialias: true });
                this.renderer.setSize(window.innerWidth, window.innerHeight);
                this.renderer.shadowMap.enabled = true;
                this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
                document.getElementById('container').appendChild(this.renderer.domElement);
                
                // 轨道控制器
                this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
                this.controls.enabled = false;
                
                // 添加光源
                const ambientLight = new THREE.AmbientLight(0x333333);
                this.scene.add(ambientLight);
                
                const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
                directionalLight.position.set(100, 200, 100);
                directionalLight.castShadow = true;
                directionalLight.shadow.mapSize.width = 2048;
                directionalLight.shadow.mapSize.height = 2048;
                this.scene.add(directionalLight);
                
                // 添加聚光灯（用于船体照明）
                const spotLight = new THREE.SpotLight(0xffffff, 0.8);
                spotLight.position.set(0, 100, 0);
                spotLight.castShadow = true;
                this.scene.add(spotLight);
                
                // 添加半球光（用于环境照明）
                const hemisphereLight = new THREE.HemisphereLight(0x5577dd, 0x224422, 0.5);
                this.scene.add(hemisphereLight);
            }
            
            createShip() {
                // 创建船体（航空母舰）
                const hullGeometry = new THREE.BoxGeometry(30, 8, 8);
                const hullMaterial = new THREE.MeshPhongMaterial({ 
                    color: 0x224466,
                    shininess: 30
                });
                this.ship = new THREE.Mesh(hullGeometry, hullMaterial);
                this.ship.position.y = 4;
                this.ship.castShadow = true;
                this.ship.receiveShadow = true;
                this.scene.add(this.ship);
                
                // 创建甲板
                const deckGeometry = new THREE.BoxGeometry(28, 0.5, 20);
                const deckMaterial = new THREE.MeshPhongMaterial({ 
                    color: 0x333333,
                    shininess: 20
                });
                this.deck = new THREE.Mesh(deckGeometry, deckMaterial);
                this.deck.position.y = 8.25;
                this.deck.position.z = -2;
                this.deck.castShadow = true;
                this.deck.receiveShadow = true;
                this.ship.add(this.deck);
                
                // 创建舰岛
                const islandGeometry = new THREE.BoxGeometry(5, 15, 4);
                const islandMaterial = new THREE.MeshPhongMaterial({ 
                    color: 0x445566,
                    shininess: 30
                });
                this.island = new THREE.Mesh(islandGeometry, islandMaterial);
                this.island.position.set(8, 13, 0);
                this.island.castShadow = true;
                this.island.receiveShadow = true;
                this.ship.add(this.island);
                
                // 创建跑道标记
                const runwayMarkings = [];
                for (let i = 0; i < 6; i++) {
                    const markingGeometry = new THREE.BoxGeometry(1, 0.1, 2);
                    const markingMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
                    const marking = new THREE.Mesh(markingGeometry, markingMaterial);
                    marking.position.set(-10 + i * 4, 8.3, -2);
                    marking.rotation.x = Math.PI / 2;
                    this.ship.add(marking);
                    runwayMarkings.push(marking);
                }
                
                // 创建飞机弹射器
                const catapultGeometry = new THREE.BoxGeometry(15, 0.2, 0.5);
                const catapultMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 });
                this.catapult = new THREE.Mesh(catapultGeometry, catapultMaterial);
                this.catapult.position.set(-8, 8.3, 3);
                this.ship.add(this.catapult);
                
                // 创建停机坪飞机
                for (let i = 0; i < 4; i++) {
                    this.createAircraftModel(-5 + i * 3, 8.5, 5, true);
                }
            }
            
            createAircraftModel(x, y, z, isStatic = false) {
                // 飞机机身
                const bodyGeometry = new THREE.CylinderGeometry(0.5, 0.5, 5, 16);
                bodyGeometry.rotateZ(Math.PI / 2);
                const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
                const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
                body.position.set(x, y, z);
                
                // 机翼
                const wingGeometry = new THREE.BoxGeometry(6, 0.1, 1.5);
                const wingMaterial = new THREE.MeshPhongMaterial({ color: 0x777777 });
                const wing = new THREE.Mesh(wingGeometry, wingMaterial);
                wing.position.set(x, y, z);
                body.add(wing);
                
                // 尾翼
                const tailGeometry = new THREE.BoxGeometry(1.5, 0.1, 1);
                const tailMaterial = new THREE.MeshPhongMaterial({ color: 0x777777 });
                const tail = new THREE.Mesh(tailGeometry, tailMaterial);
                tail.position.set(x - 2.5, y, z);
                tail.rotation.z = Math.PI / 4;
                body.add(tail);
                
                if (isStatic) {
                    this.ship.add(body);
                } else {
                    this.scene.add(body);
                    return body;
                }
            }
            
            createDestroyer(x, y, z) {
                const destroyer = {};
                
                // 船体
                const hullGeometry = new THREE.BoxGeometry(15, 4, 4);
                const hullMaterial = new THREE.MeshPhongMaterial({ color: 0x663333 });
                destroyer.mesh = new THREE.Mesh(hullGeometry, hullMaterial);
                destroyer.mesh.position.set(x, y, z);
                destroyer.mesh.castShadow = true;
                destroyer.mesh.receiveShadow = true;
                
                // 上层建筑
                const superGeometry = new THREE.BoxGeometry(5, 6, 3);
                const superMaterial = new THREE.MeshPhongMaterial({ color: 0x554433 });
                const superStruct = new THREE.Mesh(superGeometry, superMaterial);
                superStruct.position.set(0, 5, 0);
                destroyer.mesh.add(superStruct);
                
                // 导弹发射器
                const missileGeometry = new THREE.CylinderGeometry(0.8, 0.8, 3, 16);
                missileGeometry.rotateZ(Math.PI / 2);
                const missileMaterial = new THREE.MeshPhongMaterial({ color: 0x666666 });
                const missileLauncher = new THREE.Mesh(missileGeometry, missileMaterial);
                missileLauncher.position.set(4, 4, 0);
                destroyer.mesh.add(missileLauncher);
                
                // 主炮
                const gunGeometry = new THREE.CylinderGeometry(0.6, 0.6, 5, 16);
                gunGeometry.rotateZ(Math.PI / 2);
                const gunMaterial = new THREE.MeshPhongMaterial({ color: 0x777777 });
                const gun = new THREE.Mesh(gunGeometry, gunMaterial);
                gun.position.set(-4, 4, 0);
                destroyer.mesh.add(gun);
                
                destroyer.type = 'destroyer';
                destroyer.speed = 0.5 + Math.random() * 0.5;
                destroyer.health = 100;
                
                return destroyer;
            }
            
            createFrigate(x, y, z) {
                const frigate = {};
                
                // 船体
                const hullGeometry = new THREE.BoxGeometry(10, 3, 3);
                const hullMaterial = new THREE.MeshPhongMaterial({ color: 0x336633 });
                frigate.mesh = new THREE.Mesh(hullGeometry, hullMaterial);
                frigate.mesh.position.set(x, y, z);
                frigate.mesh.castShadow = true;
                frigate.mesh.receiveShadow = true;
                
                // 上层建筑
                const superGeometry = new THREE.BoxGeometry(4, 5, 2);
                const superMaterial = new THREE.MeshPhongMaterial({ color: 0x445544 });
                const superStruct = new THREE.Mesh(superGeometry, superMaterial);
                superStruct.position.set(0, 4, 0);
                frigate.mesh.add(superStruct);
                
                // 防空炮
                const aaGeometry = new THREE.CylinderGeometry(0.4, 0.4, 2, 16);
                aaGeometry.rotateZ(Math.PI / 2);
                const aaMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 });
                const aaGun = new THREE.Mesh(aaGeometry, aaMaterial);
                aaGun.position.set(0, 4, 1.5);
                frigate.mesh.add(aaGun);
                
                frigate.type = 'frigate';
                frigate.speed = 0.8 + Math.random() * 0.7;
                frigate.health = 70;
                
                return frigate;
            }
            
            createSubmarine(x, y, z) {
                const submarine = {};
                
                // 艇体
                const hullGeometry = new THREE.CylinderGeometry(2, 2, 15, 16);
                hullGeometry.rotateZ(Math.PI / 2);
                const hullMaterial = new THREE.MeshPhongMaterial({ color: 0x444444 });
                submarine.mesh = new THREE.Mesh(hullGeometry, hullMaterial);
                submarine.mesh.position.set(x, y, z);
                submarine.mesh.castShadow = true;
                submarine.mesh.receiveShadow = true;
                
                // 指挥塔
                const towerGeometry = new THREE.CylinderGeometry(1, 1, 3, 16);
                const towerMaterial = new THREE.MeshPhongMaterial({ color: 0x333333 });
                const tower = new THREE.Mesh(towerGeometry, towerMaterial);
                tower.position.set(0, 1.5, 0);
                submarine.mesh.add(tower);
                
                // 潜望镜
                const periscopeGeometry = new THREE.CylinderGeometry(0.1, 0.1, 1, 8);
                const periscopeMaterial = new THREE.MeshPhongMaterial({ color: 0x222222 });
                const periscope = new THREE.Mesh(periscopeGeometry, periscopeMaterial);
                periscope.position.set(0, 3, 0);
                tower.add(periscope);
                
                submarine.type = 'submarine';
                submarine.speed = 0.4 + Math.random() * 0.4;
                submarine.health = 120;
                submarine.depth = 0; // 0-水面，1-潜航
                
                return submarine;
            }
            
            createOcean() {
                // 创建海洋
                const oceanGeometry = new THREE.PlaneGeometry(2000, 2000, 50, 50);
                const oceanMaterial = new THREE.MeshPhongMaterial({
                    color: 0x006994,
                    transparent: true,
                    opacity: 0.9,
                    shininess: 80,
                    wireframe: false
                });
                
                this.ocean = new THREE.Mesh(oceanGeometry, oceanMaterial);
                this.ocean.rotation.x = -Math.PI / 2;
                this.ocean.position.y = -5;
                this.ocean.receiveShadow = true;
                this.scene.add(this.ocean);
                
                // 创建波浪效果
                this.waveVertices = oceanGeometry.attributes.position.array;
                this.waveTime = 0;
            }
            
            createSky() {
                // 创建天空盒
                const skyGeometry = new THREE.SphereGeometry(1500, 32, 32);
                const skyMaterial = new THREE.MeshBasicMaterial({
                    color: 0x4488ff,
                    side: THREE.BackSide
                });
                const sky = new THREE.Mesh(skyGeometry, skyMaterial);
                this.scene.add(sky);
            }
            
            createEnemies(count) {
                const types = ['destroyer', 'frigate', 'submarine'];
                
                for (let i = 0; i < count; i++) {
                    const type = types[Math.floor(Math.random() * types.length)];
                    const angle = Math.random() * Math.PI * 2;
                    const distance = 150 + Math.random() * 300;
                    const x = Math.cos(angle) * distance;
                    const z = Math.sin(angle) * distance;
                    
                    let enemy;
                    
                    switch (type) {
                        case 'destroyer':
                            enemy = this.createDestroyer(x, 2, z);
                            break;
                        case 'frigate':
                            enemy = this.createFrigate(x, 2, z);
                            break;
                        case 'submarine':
                            // 潜艇随机深度
                            const depth = Math.random() > 0.5 ? -10 : 2;
                            enemy = this.createSubmarine(x, depth, z);
                            enemy.depth = depth === 2 ? 0 : 1;
                            break;
                    }
                    
                    enemy.mesh.rotation.y = Math.random() * Math.PI * 2;
                    this.scene.add(enemy.mesh);
                    this.enemies.push(enemy);
                }
                
                document.getElementById('targets').textContent = this.enemies.length;
            }
            
            launchAircraft() {
                if (this.aircraftCount <= 0) return;
                
                this.aircraftCount--;
                document.getElementById('aircrafts').textContent = this.aircraftCount;
                
                const aircraft = {};
                aircraft.mesh = this.createAircraftModel(
                    this.ship.position.x, 
                    this.ship.position.y + 8.5, 
                    this.ship.position.z + 5
                );
                
                // 设置方向和速度
                aircraft.direction = new THREE.Vector3(0, 0, -1);
                aircraft.direction.applyQuaternion(this.ship.quaternion);
                aircraft.speed = 1.2;
                aircraft.target = null;
                
                // 寻找目标
                if (this.enemies.length > 0) {
                    const randomEnemy = this.enemies[Math.floor(Math.random() * this.enemies.length)];
                    aircraft.target = randomEnemy.mesh;
                }
                
                this.aircrafts.push(aircraft);
                
                // 显示通知
                this.showNotification("舰载机已起飞!");
            }
            
            updateWaveEffect() {
                this.waveTime += 0.1;
                
                for (let i = 0; i < this.waveVertices.length; i += 3) {
                    const x = this.waveVertices[i];
                    const z = this.waveVertices[i + 2];
                    
                    const height = Math.sin(x * 0.1 + this.waveTime) * 0.8 +
                                  Math.sin(z * 0.15 + this.waveTime * 1.3) * 0.5;
                    
                    this.waveVertices[i + 1] = height;
                }
                
                this.ocean.geometry.attributes.position.needsUpdate = true;
            }
            
            setupEventListeners() {
                // 开始按钮
                document.getElementById('start-btn').addEventListener('click', () => {
                    document.getElementById('start-screen').style.opacity = '0';
                    setTimeout(() => {
                        document.getElementById('start-screen').style.display = 'none';
                        this.gameActive = true;
                    }, 500);
                });
                
                // 武器选择
                document.getElementById('weapon1').addEventListener('click', () => {
                    this.setWeapon(0);
                });
                
                document.getElementById('weapon2').addEventListener('click', () => {
                    this.setWeapon(1);
                });
                
                document.getElementById('weapon3').addEventListener('click', () => {
                    this.setWeapon(2);
                });
                
                // 键盘控制
                this.keys = {};
                window.addEventListener('keydown', (e) => {
                    this.keys[e.key.toLowerCase()] = true;
                    
                    // 武器切换
                    if (e.key === '1') this.setWeapon(0);
                    if (e.key === '2') this.setWeapon(1);
                    if (e.key === '3') this.setWeapon(2);
                    
                    // 发射舰载机
                    if (e.key === 'f' || e.key === 'F') {
                        if (this.gameActive && this.aircraftCount > 0) {
                            this.launchAircraft();
                        }
                    }
                    
                    // 切换视角
                    if (e.key === 'c' || e.key === 'C') {
                        this.cameraMode = (this.cameraMode + 1) % 3;
                        this.controls.enabled = this.cameraMode === 1;
                        this.showNotification(`视角: ${['跟随', '自由', '俯视'][this.cameraMode]}`);
                    }
                });
                
                window.addEventListener('keyup', (e) => {
                    this.keys[e.key.toLowerCase()] = false;
                });
                
                // 窗口大小调整
                window.addEventListener('resize', () => {
                    this.camera.aspect = window.innerWidth / window.innerHeight;
                    this.camera.updateProjectionMatrix();
                    this.renderer.setSize(window.innerWidth, window.innerHeight);
                });
                
                // 鼠标点击开火
                this.renderer.domElement.addEventListener('click', () => {
                    if (!this.gameActive) return;
                    this.fireWeapon();
                });
            }
            
            setWeapon(index) {
                this.currentWeapon = index;
                document.getElementById('weapon').textContent = this.weapons[index];
                
                // 更新UI高亮
                document.querySelectorAll('.weapon').forEach((el, i) => {
                    if (i === index) {
                        el.classList.add('active');
                    } else {
                        el.classList.remove('active');
                    }
                });
            }
            
            fireWeapon() {
                if (this.currentWeapon === 2 && this.torpedoCount <= 0) {
                    this.showNotification("鱼雷已用完!");
                    return;
                }
                
                // 根据当前武器创建不同的炮弹
                let projectile;
                
                switch (this.currentWeapon) {
                    case 0: // 主炮
                        projectile = this.createProjectile(0xffaa00, 0.6);
                        break;
                    case 1: // 导弹
                        projectile = this.createProjectile(0xff5555, 0.4);
                        break;
                    case 2: // 鱼雷
                        projectile = this.createProjectile(0x00aaff, 0.8);
                        this.torpedoCount--;
                        document.getElementById('torpedos').textContent = this.torpedoCount;
                        
                        // 创建水面扰动效果
                        const disturbance = document.createElement('div');
                        disturbance.className = 'water-disturbance';
                        disturbance.style.left = '50%';
                        disturbance.style.top = '50%';
                        document.getElementById('container').appendChild(disturbance);
                        
                        setTimeout(() => {
                            disturbance.remove();
                        }, 2000);
                        break;
                }
                
                this.projectiles.push(projectile);
                this.scene.add(projectile);
            }
            
            createProjectile(color, size) {
                const geometry = new THREE.SphereGeometry(size, 16, 16);
                const material = new THREE.MeshBasicMaterial({ color: color });
                const projectile = new THREE.Mesh(geometry, material);
                
                // 从船头位置发射
                projectile.position.copy(this.ship.position);
                projectile.position.z -= 15;
                projectile.position.y = 5;
                
                // 设置方向和速度
                projectile.direction = new THREE.Vector3(0, 0, -1);
                projectile.direction.applyQuaternion(this.ship.quaternion);
                projectile.speed = this.currentWeapon === 1 ? 1.5 : 1.0;
                projectile.type = this.currentWeapon;
                
                return projectile;
            }
            
            updateShip() {
                if (!this.gameActive) return;
                
                // 前进/后退
                if (this.keys['w']) {
                    this.ship.translateZ(-0.5);
                }
                if (this.keys['s']) {
                    this.ship.translateZ(0.3);
                }
                
                // 左右旋转
                if (this.keys['a']) {
                    this.ship.rotation.y += 0.02;
                }
                if (this.keys['d']) {
                    this.ship.rotation.y -= 0.02;
                }
                
                // 限制船的位置
                this.ship.position.x = THREE.MathUtils.clamp(this.ship.position.x, -500, 500);
                this.ship.position.z = THREE.MathUtils.clamp(this.ship.position.z, -500, 500);
            }
            
            updateEnemies() {
                this.enemies.forEach((enemy, index) => {
                    // 驱逐舰和护卫舰向玩家移动
                    if (enemy.type === 'destroyer' || enemy.type === 'frigate') {
                        const direction = new THREE.Vector3();
                        direction.subVectors(this.ship.position, enemy.mesh.position).normalize();
                        
                        const targetRotation = Math.atan2(direction.x, direction.z);
                        enemy.mesh.rotation.y = THREE.MathUtils.lerp(enemy.mesh.rotation.y, targetRotation, 0.02);
                        
                        enemy.mesh.translateZ(enemy.speed * 0.05);
                    }
                    
                    // 潜艇行为
                    if (enemy.type === 'submarine') {
                        // 随机改变深度
                        if (Math.random() < 0.005) {
                            enemy.depth = enemy.depth === 0 ? 1 : 0;
                            enemy.mesh.position.y = enemy.depth === 0 ? 2 : -10;
                        }
                        
                        // 随机移动
                        if (Math.random() < 0.02) {
                            enemy.mesh.rotation.y += (Math.random() - 0.5) * 0.2;
                        }
                        
                        enemy.mesh.translateZ(enemy.speed * 0.03);
                    }
                    
                    // 随机开火
                    if (Math.random() < 0.003) {
                        this.enemyFire(enemy);
                    }
                });
            }
            
            enemyFire(enemy) {
                let projectile;
                
                if (enemy.type === 'destroyer') {
                    // 驱逐舰发射导弹
                    const geometry = new THREE.SphereGeometry(0.5, 16, 16);
                    const material = new THREE.MeshBasicMaterial({ color: 0xff3333 });
                    projectile = new THREE.Mesh(geometry, material);
                    
                    projectile.position.copy(enemy.mesh.position);
                    projectile.position.z += 8;
                    
                    projectile.direction = new THREE.Vector3(0, 0, 1);
                    projectile.direction.applyQuaternion(enemy.mesh.quaternion);
                    projectile.speed = 1.0;
                } 
                else if (enemy.type === 'submarine') {
                    // 潜艇发射鱼雷
                    const geometry = new THREE.SphereGeometry(0.7, 16, 16);
                    const material = new THREE.MeshBasicMaterial({ color: 0x00aaff });
                    projectile = new THREE.Mesh(geometry, material);
                    
                    projectile.position.copy(enemy.mesh.position);
                    projectile.position.z += 8;
                    
                    projectile.direction = new THREE.Vector3(0, 0, 1);
                    projectile.direction.applyQuaternion(enemy.mesh.quaternion);
                    projectile.speed = 0.8;
                }
                
                if (projectile) {
                    this.projectiles.push(projectile);
                    this.scene.add(projectile);
                }
            }
            
            updateAircrafts() {
                for (let i = this.aircrafts.length - 1; i >= 0; i--) {
                    const aircraft = this.aircrafts[i];
                    
                    // 移动飞机
                    aircraft.mesh.position.add(
                        aircraft.direction.clone().multiplyScalar(aircraft.speed)
                    );
                    
                    // 如果目标存在，向目标移动
                    if (aircraft.target && aircraft.target.parent) {
                        const targetPos = new THREE.Vector3();
                        aircraft.target.getWorldPosition(targetPos);
                        
                        const direction = new THREE.Vector3();
                        direction.subVectors(targetPos, aircraft.mesh.position).normalize();
                        
                        // 应用方向
                        aircraft.direction.lerp(direction, 0.05);
                        
                        // 检查距离
                        const distance = aircraft.mesh.position.distanceTo(targetPos);
                        if (distance < 20) {
                            // 找到目标敌人
                            const enemy = this.enemies.find(e => e.mesh === aircraft.target);
                            if (enemy) {
                                enemy.health -= 30;
                                
                                if (enemy.health <= 0) {
                                    this.scene.remove(enemy.mesh);
                                    this.enemies.splice(this.enemies.indexOf(enemy), 1);
                                    this.score += 150;
                                    document.getElementById('score').textContent = this.score;
                                    document.getElementById('targets').textContent = this.enemies.length;
                                }
                                
                                // 显示爆炸效果
                                this.showNotification("空袭成功!");
                            }
                            
                            // 移除飞机
                            this.scene.remove(aircraft.mesh);
                            this.aircrafts.splice(i, 1);
                            continue;
                        }
                    }
                    
                    // 检查是否超出边界
                    if (Math.abs(aircraft.mesh.position.x) > 800 || 
                        Math.abs(aircraft.mesh.position.z) > 800) {
                        this.scene.remove(aircraft.mesh);
                        this.aircrafts.splice(i, 1);
                    }
                }
            }
            
            updateProjectiles() {
                for (let i = this.projectiles.length - 1; i >= 0; i--) {
                    const projectile = this.projectiles[i];
                    
                    // 移动炮弹
                    projectile.position.add(
                        projectile.direction.clone().multiplyScalar(projectile.speed)
                    );
                    
                    // 检查是否超出边界
                    if (Math.abs(projectile.position.x) > 800 || 
                        Math.abs(projectile.position.z) > 800) {
                        this.scene.remove(projectile);
                        this.projectiles.splice(i, 1);
                        continue;
                    }
                    
                    // 碰撞检测
                    let hit = false;
                    
                    // 玩家炮弹击中敌人
                    if (projectile.material.color.getHex() !== 0xff3333) {
                        for (let j = this.enemies.length - 1; j >= 0; j--) {
                            const enemy = this.enemies[j];
                            const distance = projectile.position.distanceTo(enemy.mesh.position);
                            
                            // 鱼雷只能攻击潜艇
                            if (projectile.type === 2 && enemy.type !== 'submarine') continue;
                            
                            // 导弹和主炮不能攻击水下潜艇
                            if (projectile.type !== 2 && enemy.type === 'submarine' && enemy.depth === 1) continue;
                            
                            if (distance < (enemy.type === 'submarine' ? 8 : 6)) {
                                // 根据武器类型造成不同伤害
                                let damage = 0;
                                switch (projectile.type) {
                                    case 0: damage = 20; break; // 主炮
                                    case 1: damage = 35; break; // 导弹
                                    case 2: damage = 50; break; // 鱼雷
                                }
                                
                                enemy.health -= damage;
                                
                                if (enemy.health <= 0) {
                                    // 击中敌人
                                    this.scene.remove(enemy.mesh);
                                    this.enemies.splice(j, 1);
                                    hit = true;
                                    
                                    // 增加分数
                                    this.score += enemy.type === 'destroyer' ? 100 : 
                                                enemy.type === 'frigate' ? 80 : 120;
                                    document.getElementById('score').textContent = this.score;
                                    
                                    // 更新敌人数量显示
                                    document.getElementById('targets').textContent = this.enemies.length;
                                    
                                    // 如果所有敌人都被消灭，生成新的敌人
                                    if (this.enemies.length === 0) {
                                        this.createEnemies(8);
                                        this.showNotification("新敌舰群出现!");
                                    }
                                }
                                break;
                            }
                        }
                    }
                    // 敌人炮弹击中玩家
                    else {
                        const distance = projectile.position.distanceTo(this.ship.position);
                        if (distance < 15) {
                            hit = true;
                            this.health -= 10;
                            
                            if (this.health < 0) this.health = 0;
                            document.getElementById('health').textContent = this.health + '%';
                            
                            // 游戏结束
                            if (this.health <= 0) {
                                this.gameOver();
                            }
                        }
                    }
                    
                    // 如果击中目标，移除炮弹
                    if (hit) {
                        this.scene.remove(projectile);
                        this.projectiles.splice(i, 1);
                    }
                }
            }
            
            gameOver() {
                this.gameActive = false;
                
                // 显示游戏结束信息
                const gameOverScreen = document.createElement('div');
                gameOverScreen.style.position = 'absolute';
                gameOverScreen.style.top = '0';
                gameOverScreen.style.left = '0';
                gameOverScreen.style.width = '100%';
                gameOverScreen.style.height = '100%';
                gameOverScreen.style.display = 'flex';
                gameOverScreen.style.flexDirection = 'column';
                gameOverScreen.style.justifyContent = 'center';
                gameOverScreen.style.alignItems = 'center';
                gameOverScreen.style.background = 'rgba(0, 10, 30, 0.95)';
                gameOverScreen.style.zIndex = '20';
                gameOverScreen.style.color = 'white';
                
                gameOverScreen.innerHTML = `
                    <h1 style="font-size: 4rem; margin-bottom: 20px; color: #f55;">战斗结束</h1>
                    <h2 style="font-size: 2rem; margin-bottom: 30px;">最终得分: ${this.score}</h2>
                    <button class="btn" id="restart-btn">重新开始</button>
                `;
                
                document.getElementById('container').appendChild(gameOverScreen);
                
                // 重新开始按钮
                document.getElementById('restart-btn').addEventListener('click', () => {
                    location.reload();
                });
            }
            
            updateRadar() {
                const radar = document.getElementById('radar');
                radar.innerHTML = '';
                
                this.enemies.forEach(enemy => {
                    // 将3D位置转换为2D雷达位置
                    const relativeX = enemy.mesh.position.x - this.ship.position.x;
                    const relativeZ = enemy.mesh.position.z - this.ship.position.z;
                    
                    // 限制在雷达范围内
                    const maxDistance = 400;
                    const distance = Math.sqrt(relativeX*relativeX + relativeZ*relativeZ);
                    if (distance > maxDistance) return;
                    
                    // 转换为雷达坐标（雷达尺寸200x200）
                    const radarX = 100 + (relativeX / maxDistance) * 100;
                    const radarY = 100 + (relativeZ / maxDistance) * 100;
                    
                    const dot = document.createElement('div');
                    dot.className = 'radar-dot';
                    
                    // 根据敌人类型设置不同样式
                    if (enemy.type === 'submarine') {
                        dot.classList.add('dot-submarine');
                        dot.style.width = '10px';
                        dot.style.height = '10px';
                    } else if (enemy.type === 'destroyer') {
                        dot.classList.add('dot-ship');
                        dot.style.width = '12px';
                        dot.style.height = '12px';
                    } else {
                        dot.classList.add('dot-aircraft');
                        dot.style.width = '8px';
                        dot.style.height = '8px';
                    }
                    
                    dot.style.left = radarX + 'px';
                    dot.style.top = radarY + 'px';
                    
                    radar.appendChild(dot);
                });
                
                // 更新小地图
                const miniMap = document.querySelector('.mini-map');
                miniMap.innerHTML = '';
                
                // 添加玩家位置
                const playerDot = document.createElement('div');
                playerDot.className = 'mini-map-player';
                playerDot.style.left = '50%';
                playerDot.style.top = '50%';
                miniMap.appendChild(playerDot);
                
                // 添加敌人位置
                this.enemies.forEach(enemy => {
                    const relativeX = enemy.mesh.position.x - this.ship.position.x;
                    const relativeZ = enemy.mesh.position.z - this.ship.position.z;
                    
                    const maxDistance = 500;
                    const distance = Math.sqrt(relativeX*relativeX + relativeZ*relativeZ);
                    if (distance > maxDistance) return;
                    
                    const mapX = 50 + (relativeX / maxDistance) * 90;
                    const mapY = 50 + (relativeZ / maxDistance) * 90;
                    
                    const dot = document.createElement('div');
                    dot.className = 'mini-map-enemy';
                    
                    if (enemy.type === 'submarine') {
                        dot.classList.add('mini-sub');
                    } else if (enemy.type === 'destroyer') {
                        dot.classList.add('mini-ship');
                    } else {
                        dot.classList.add('mini-aircraft');
                    }
                    
                    dot.style.left = mapX + '%';
                    dot.style.top = mapY + '%';
                    
                    miniMap.appendChild(dot);
                });
            }
            
            showNotification(text) {
                const notification = document.createElement('div');
                notification.className = 'notification';
                notification.textContent = text;
                document.getElementById('container').appendChild(notification);
                
                setTimeout(() => {
                    notification.remove();
                }, 2000);
            }
            
            updateCamera() {
                if (this.cameraMode === 0) {
                    // 跟随视角
                    this.camera.position.x = this.ship.position.x;
                    this.camera.position.z = this.ship.position.z + 80;
                    this.camera.position.y = 40;
                    this.camera.lookAt(this.ship.position.x, 10, this.ship.position.z);
                }
                else if (this.cameraMode === 2) {
                    // 俯视视角
                    this.camera.position.x = this.ship.position.x;
                    this.camera.position.z = this.ship.position.z;
                    this.camera.position.y = 150;
                    this.camera.lookAt(this.ship.position.x, 0, this.ship.position.z);
                }
            }
            
            animate() {
                requestAnimationFrame(() => this.animate());
                
                if (this.gameActive) {
                    this.updateShip();
                    this.updateEnemies();
                    this.updateProjectiles();
                    this.updateAircrafts();
                    this.updateWaveEffect();
                    this.updateRadar();
                    this.updateCamera();
                    
                    if (this.controls.enabled) {
                        this.controls.update();
                    }
                }
                
                this.renderer.render(this.scene, this.camera);
            }
        }

        // 页面加载完成后启动游戏
        window.addEventListener('load', () => {
            const game = new NavalBattleSimulator();
        });
    </script>
</body>
</html>